<script setup>
    import {  provide, onMounted } from 'vue'
    import { getFacilityList } from '@/api/agriculture'

    import LeftCard from '../../components/LeftCard.vue'
    import AgricultureMap from './components/AgricultureMap.vue'
    import AgricultureDetail from './components/AgricultureDetail.vue'
    import IframeBox from '@/components/IframeBox.vue'


    // 点击左侧列表 定位到中心店
    let agricultureMap = $ref(null)
    const handleClick = (item) => {
        agricultureMap.setMapCenterPoint(item.latitude, item.longitude)
    }
    
    let agricultureDetail = $ref(null)
    const closeDetailDialog = (e = '') => {
        agricultureDetail.closeDialog()

    }
    provide('close', closeDetailDialog)

    onMounted(() => {
        getList()
    })

    // 获取设备列表
    let resData = $ref([])
    let resDataCopy = []
    let dataLoading = $ref(true)
    const getList = () => {
        getFacilityList().then(res => {
            dataLoading = false
            if(res.success){
                resData = res.result
                resDataCopy = res.result
            }
        })
    }

    // 菜单搜索
    const areaSearch = (keyword) => {
        let data = JSON.parse(JSON.stringify(resDataCopy))
        if(!keyword){
            resData = data
            return
        }
        resData = data.filter((item) => {
            if(item.facname.indexOf(keyword) > -1){
                return item
            }
        })
    }

    // 显示详情
    const showDetail = (facid, id) => {
        agricultureDetail.showDetail(facid, id)
    }
    

</script>

<template>
    <div class="project-manage-wrap" v-loading="dataLoading">
        <agriculture-map 
            v-if="!dataLoading" 
            :positionList="resData"
            @showDetail="showDetail"
            ref="agricultureMap"
        ></agriculture-map>

        <div class="suspended-content-warp">

            <left-card title="菜单列表" @areaSearch="areaSearch">
                <el-scrollbar class="menu-list-scrollbar">
                    <div 
                        class="town-item font-b pointer" 
                        v-for="(item, index) in resData"
                        :key="index"
                        @click="handleClick(item)"
                        :title="item.facname"
                    >
                        {{ item.facname }}
                    </div>
                </el-scrollbar>
            </left-card>

            <!-- 详情 -->
            <agriculture-detail ref="agricultureDetail"></agriculture-detail>

            <!-- iframe 四情管理 -->
            <iframe-box></iframe-box>

        </div>

    </div>
</template> 

<style lang="less" scoped>
    .project-manage-wrap{
        width: 100%;
        height: 100%;
        position: relative;

        .menu-list-scrollbar{
            height: 680px;
        }

        .town-item{
            padding: 10px 0;
            height: 40px;
            line-height: 20px;
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:hover{
                text-shadow: 0 0 2px #52CCFF;
            }
        } 
    }
</style>